<template>
  <div class="page-container-padding">
    <div>
      <el-date-picker
        v-model="currentDate"
        value-format="yyyyMMdd"
        size="mini"
        :clearable="false"
        @change="getReferenceData"
      ></el-date-picker>
      <el-button
        style="margin-left: 6px"
        type="primary"
        size="mini"
        @click="getReferenceData"
      >
        查询
      </el-button>
    </div>
    <div class="container">
      <div v-if="varietyList.length > 0">
        <div
          v-for="item in varietyList"
          :key="item.variety_en"
          class="refrence-item"
        >
          <div class="item-title">
            <span class="item-dot"></span>
            <span class="item-text">{{ item.variety_name }}</span>
            <span class="item-del">
              <i class="el-icon-delete" @click="toDeleteItem(item)">删除</i>
            </span>
          </div>
          <div class="item-refrenece">
            <div v-for="(p, i) in item.reference.split('\n')" :key="i">
              <div>{{ p }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty :description="currentDate + '没有晨会纪要信息'"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    GetEarlyReference,
    DeleteEarlyReference,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        currentDate: datetimeToStr(new Date(), true, ''),
        varietyList: [],
      }
    },
    mounted() {
      this.getReferenceData()
    },
    methods: {
      getReferenceData() {
        GetEarlyReference(this.currentDate).then((res) => {
          let tmpData = []
          res.data.forEach((ele) => {
            ele.data.forEach((v) => {
              if (v.reference && v.reference.length > 0) {
                tmpData.push(v)
              }
            })
          })
          this.varietyList = tmpData
        })
      },

      // 删除品种的晨会纪要
      toDeleteItem(item) {
        this.$baseConfirm('确定要删除这个条目吗?', '删除确认', () => {
          DeleteEarlyReference(item.id).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.getReferenceData()
          })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .item-title {
    margin-bottom: 4px;
    line-height: 26px;
    .item-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fe6814;
    }
    .item-text {
      font-size: 18px;
      font-weight: 700;
      padding-left: 8px;
    }
    .item-del {
      float: right;
      cursor: pointer;
      color: #e62929;
    }
  }
  .container {
    margin-top: 26px;
    width: 50%;
    .item-refrenece {
      font-size: 16px;
      margin-left: 16px;
      text-indent: 2em;
      margin-bottom: 22px;
      padding: 10px;
      border: 1px solid #ececec;
      line-height: 26px;
      border-radius: 3px;
      &:hover {
        box-shadow: 0px 0px 1px 1px #51b2f3;
        color: #000;
      }
    }
  }
</style>
